<template>
  <div class="tasks">
    <!-- 选择任务页面 -->
    <div class="elect">
      <div class="title">
        <!-- <i class="el-icon-delete"></i> -->
      </div>
      <div class="content">
        <el-row :gutter="20">
        <!-- 左 -->
            <el-col :span="18">
          <el-card class="box-card card-color">
            <div slot="header" class="clearfix">
            <span>支行表单</span>
            <el-button style="float: right; padding: 3px 0;color:#fff" type="text" @click="saveExcel()">导出到excel</el-button>
          </div>
              <div class="sub-branch">
                <el-table
                id="tableExcel"
                class="jjj"
                height="400px"
                :data="tableData"
                highlight-current-row
                @current-change="setTempSub"
                style="width: 100%">
                <el-table-column
                  prop="branch"
                  label="支行名称">
                </el-table-column>
                <el-table-column
                  prop="tasks[0]"
                  label="任务一">
                </el-table-column>
                <el-table-column
                  prop="tasks[1]"
                  label="任务二">
                </el-table-column>
                <el-table-column
                  prop="tasks[2]"
                  label="任务三">
                </el-table-column> <el-table-column
                  prop="tasks[3]"
                  label="任务四">
                </el-table-column>
                <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="clearSubTasks(scope.$index, scope.row)">清除任务</el-button>
        </template>
      </el-table-column>
          </el-table>
              </div>
          </el-card>
          </el-col>
      <!-- 右 -->
      <el-col :span="6">
        <el-card class="box-card card-color">
          <div slot="header" class="clearfix">
            <span>任务名单</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">清除/重选</el-button> -->
          </div>
          <el-checkbox-group 
            v-model="tempSub.tasks"
            :max="4"
            class="tempSubTasks"
            @change="setSubTasks"
            :min="0">
              <el-checkbox 
              style="display:block;margin:8px 0px"
              v-for="task in taskArr" 
              border 
              :label="task.name"
              size="medium" 
              class="checkbox-color"
              :key="task.id">
              {{task.label}}
              </el-checkbox>
          </el-checkbox-group>
        </el-card>
      </el-col>
</el-row>
<div class="slogan" >固合规 强执行 2018我们砥砺前行！</div>
    <a id="downlink"></a></div>
  </div>
</div>
</template>

<script>
var XLSX = require("xlsx");
export default {
  data() {
    // 原始数据
    let name = [
        "二环东路支行",
        "花园支行",
        "解放路支行",
        "朝山街支行",
        "燕山支行",
        "文东支行",
        "大明湖支行",
        "明湖东路支行",
        "工业南路支行",
        "泺源大街支行",
        "开元支行",
        "分行营业部",
        "浆水泉支行",
        "山大路支行",
        "历山东路支行",
        "文西支行",
        "甸柳支行",
        "龙奥支行"
      ],
      taskLabel = [
        "“零”风险类差错|“零”风险类差错",
        "“零”违规预警|“零”违规预警",
        "支付、交换业务“零”差错|支付、交换业务“零”差错",
        "“零”屡查屡犯问题|“零”屡查屡犯问题",
        "监管红线“零”容忍|监管红线“零”容忍",
        "服务排名全行前 30 |服务排名全行前 30 ",
        "“零”反洗钱差错|“零”反洗钱差错",
        "集中授权差错≤2 |集中授权差错≤2 ",
        "账户、国库业务“零”差错|账户、国库业务“零”差错"
      ],
      tableData = new Array(),
      taskArr = new Array();
    // 支行构造函数
    function Bank(name) {
      this.branch = name;
      this.tasks = new Array();
    }
    // 任务构造函数
    function Task(label, key) {
      this.label = label.split("|")[1];
      this.name = label.split("|")[0];
      this.id = key;
    }
    // 循环生成所有银行对象
    for (let key in name) {
      tableData.push(new Bank(name[key]));
    }
    // 生成所有任务对象
    for (let key in taskLabel) {
      taskArr.push(new Task(taskLabel[key], key));
    }

    return {
      tableData,
      outFile: "",
      // 任务列表
      taskArr,
      // 选择的支行
      tempSub: tableData[0]
    };
  },
  methods: {
    // 更改当前银行
    setTempSub(a) {
      this.tempSub = a;
    },
    // 更改绑定的任务
    setSubTasks(a) {
      this.tempSub.tasks = a;
    },
    clearSubTasks(a, b, c) {
      b.tasks.splice(0, b.tasks.length);
    },
    saveExcel() {
      let ccc = this.tableData;
      let data = [
        {
          name: "支行名",
          d1: "任务一",
          d2: "任务二",
          d3: "任务三 ",
          d4: "任务四"
        }
      ];
      for (let i in ccc) {
        data.push({
          name: ccc[i].branch,
          d1: ccc[i].tasks[0],
          d2: ccc[i].tasks[1],
          d3: ccc[i].tasks[2],
          d4: ccc[i].tasks[3]
        });
      }
      // data = data.concat(rs);
      this.downloadExl(data, "任务表");
    },
    downloadExl(json, downName, type) {
      // 导出到excel
      let keyMap = []; // 获取键
      for (let k in json[0]) {
        keyMap.push(k);
      }
      let tmpdata = []; // 用来保存转换好的json
      json
        .map((v, i) =>
          keyMap.map((k, j) =>
            Object.assign(
              {},
              {
                v: v[k],
                position:
                  (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) +
                  (i + 1)
              }
            )
          )
        )
        .reduce((prev, next) => prev.concat(next))
        .forEach(function(v) {
          tmpdata[v.position] = {
            v: v.v
          };
        });
      let outputPos = Object.keys(tmpdata); // 设置区域,比如表格从A1到D10
      let tmpWB = {
        SheetNames: ["mySheet"], // 保存的表标题
        Sheets: {
          mySheet: Object.assign(
            {},
            tmpdata, // 内容
            {
              "!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1] // 设置填充区域
            }
          )
        }
      };
      let tmpDown = new Blob(
        [
          this.s2ab(
            XLSX.write(
              tmpWB,
              {
                bookType: type === undefined ? "xlsx" : type,
                bookSST: false,
                type: "binary"
              } // 这里的数据是用来定义导出的格式类型
            )
          )
        ],
        {
          type: ""
        }
      ); // 创建二进制对象写入转换好的字节流
      var href = URL.createObjectURL(tmpDown); // 创建对象超链接
      this.outFile.download = downName + ".xlsx"; // 下载名称
      this.outFile.href = href; // 绑定a标签
      this.outFile.click(); // 模拟点击实现下载
      setTimeout(function() {
        // 延时释放
        URL.revokeObjectURL(tmpDown); // 用URL.revokeObjectURL()来释放这个object URL
      }, 100);
    },
    s2ab(s) {
      // 字符串转字符流
      var buf = new ArrayBuffer(s.length);
      var view = new Uint8Array(buf);
      for (var i = 0; i !== s.length; ++i) {
        view[i] = s.charCodeAt(i) & 0xff;
      }
      return buf;
    },
    getCharCol(n) {
      // 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。
      let s = "";
      let m = 0;
      while (n > 0) {
        m = n % 26 + 1;
        s = String.fromCharCode(m + 64) + s;
        n = (n - m) / 26;
      }
      return s;
    }
  },
  mounted() {
    this.outFile = document.getElementById("downlink");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.item {
  margin-bottom: 18px;
}
.tempSubTasks {
  height: 400px;
  overflow: auto;
}
.slogan {
  color: rgb(251, 255, 30);
  font-size: 3rem;
  text-shadow: 0 0 5px rgb(0, 0, 0);
  text-align: center;
  padding-top: 1rem;
  font-weight: bold;
}
</style>
